<template>
    <div class="app-container calendar-list-container">

        <el-button type="success" @click="handleFilter">刷新</el-button>
        <div style="display: flex; margin-top: 10px;">
        <!-- <div style="margin-top: 2.6%;margin-right: 10px;color: #909399;">
            <div style="margin-bottom: 10px; font-size: 15px;">看板显示值:</div>
            <div style="font-size: 15px;">修正值:</div>
        </div> -->
        <div style="width: 100px">
            <el-table
            :data="titlelist"
            border
          >
          <el-table-column label="属性值" prop="name" align="center"/>
          </el-table>
        </div>
      <!-- table 表格 -->
      <el-table
      height="108px"
        :data="tableInfo"
        element-loading-text="给我一首歌的时间"
        stripe
        @cell-click="alter"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="3#PH值" prop="ph3" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.ph3 }}</div>
                <div class="item2">{{scope.row.ph3 ? scope.row.ph3 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="4#PH值" prop="ph4" align="center" >
            <template slot-scope="scope">
                <div class="item1">{{updvalue.ph4 }}</div>
                <div class="item2">{{scope.row.ph4 ? scope.row.ph4 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="5#PH值" prop="ph5" align="center" >
            <template slot-scope="scope">
                <div class="item1">{{updvalue.ph5 }}</div>
                <div class="item2">{{scope.row.ph5 ? scope.row.ph5 : '无' }}</div>
            </template> 
        </el-table-column>
        <el-table-column label="6#PH值" prop="ph6" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.ph6 }}</div>
                <div class="item2">{{scope.row.ph6 ? scope.row.ph6 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="7#PH值" prop="ph7" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.ph7 }}</div>
                <div class="item2">{{scope.row.ph7 ? scope.row.ph7 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="8#PH值" prop="ph8" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.ph8 }}</div>
                <div class="item2">{{scope.row.ph8 ? scope.row.ph8 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="9#PH值" prop="ph9" align="center" >
            <template slot-scope="scope">
                <div class="item1">{{updvalue.ph9 }}</div>
                <div class="item2">{{scope.row.ph9 ? scope.row.ph9 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="9#电导率值" prop="conductivity9" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.conductivity9 }}</div>
                <div class="item2">{{scope.row.conductivity9 ? scope.row.conductivity9 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="10#温度值" prop="temp10" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.temp10 }}</div>
                <div class="item2">{{scope.row.temp10 ? scope.row.temp10 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="11#温度值" prop="temp11" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.temp11 }}</div>
                <div class="item2">{{scope.row.temp11 ? scope.row.temp11 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="12#温度值" prop="temp12" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.temp12 }}</div>
                <div class="item2">{{scope.row.temp12 ? scope.row.temp12 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="13#温度值" prop="temp13" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.temp13 }}</div>
                <div class="item2">{{scope.row.temp13 ? scope.row.temp13 : '无' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="14#温度值" prop="temp14" align="center">
            <template slot-scope="scope">
                <div class="item1">{{updvalue.temp14 }}</div>
                <div class="item2">{{scope.row.temp14 ? scope.row.temp14 : '无' }}</div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="tip" class="el-upload__tip">说明：可加可减，PH值的精度为0.1，电导率值和温度值的精度为1</div>
    
    <el-dialog
    :title="title"
    :visible.sync="show"
    width="30%">
    <el-input v-model="input" autocomplete="off"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </template>
    
    <script>
  import { getSprayParameter,findReceiveDataUpd,receiveDataUpd } from "@/api/emsPart.js";
  export default {
    name: "parameterDetection",
    data() {
      return {
        titlelist: [{name:'看板显示值:'},{name:'修正值:'}],
        title: '提示',
        show: false,
        input:'',
        formLabelWidth: "100px", //弹框内部组件的宽度设定
        tableInfo: [], //table表单内容
        userInfo: this.$store.state.user.userInfo,
        updvalue: '',
        alterKey:''
      };
    },
    methods: {
        // 修改确定按钮
        async submit(){
            if(!this.input) return this.$message.warning('不能为空')
            let query
           // 判断数组有没有key
            if(!this.tableInfo[0].hasOwnProperty(this.alterKey)){
                query = {
                        [this.alterKey]: this.input
                    }
            }
            for (let key in this.tableInfo[0]) {  
                if(this.alterKey == key){
                    console.log(key + ": " + this.tableInfo[0][key])
                    query = {
                        [key]: this.input
                    }
                }
            }
            console.log(query)
            const res = await receiveDataUpd(query)
            const errMsg = res.msg
            if(res.code == '1'){
              this.handleFilter()
              this.show = false
             this.$message({
             	message: '操作成功',
             	type: 'success'
             	})
 	        } else {
             	this.$message({
             	message: errMsg,
             	type: 'warning'
             	})
             }
        },
        alter(row,column,e){
            // console.log(row)
            // console.log(column.property)
            // console.log(row[column.property])
            this.show = true
            this.title = column.label
            if(row[column.property]){
                this.input = row[column.property]
            } else {
                this.input = ''
            }
            this.alterKey = column.property
        },
      async handleFilter() {
        this.tableInfo = []
            let data = await getSprayParameter();
            // this.tableInfo.push(data.data)
            this.updvalue = data.data
            const res = await findReceiveDataUpd()
            console.log(res)
            this.tableInfo.push(res.data)
            console.log(this.tableInfo)
      },
    },
    // 进入页面获取table信息
    mounted() {
      this.handleFilter();
    },
  };
  </script>
    
    <style>
    .item1{
        height: 20px;
        margin-top: 3px;
    }
    .item2{
        margin-top: 13px;
        margin-bottom: 30px;
    }
  </style>